<script
  setup
  lang="ts"
>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {appName} from '~/constants'
// import autofit from 'autofit.js'
//
// onMounted(() => {
//   autofit.init({
//     allowScroll: true,
//     // ignore: [
//     //   {
//     //     el: ".bigCharToggle", //必填
//     //   }, {
//     //     el: ".float-button",
//     //   }, {
//     //     el: ".float-button2",
//     //   },
//     // ]
//   })
// })

useHead({
  title: appName,
})

const config = useRuntimeConfig()
console.log('config.public', config.public)

const globalStore = useGlobalStore()
const isBigCharMode = computed(() => {
  return globalStore.isBigCharMode
})
onMounted(() => {
  // console.log(globalStore.isBigCharMode)
  if (isBigCharMode.value) {
    if (import.meta.client) {
      document.body.classList.add('big-char-mode')
    }
  }
  document.addEventListener('wheel', (event) => {
    if (event?.ctrlKey === true) {
      // 阻止默认行为，防止滚轮缩放
      event.preventDefault()
    }
  }, {passive: false})
  addGlobalContextMenuHandler()
})
onUnmounted(() => {
  removeGlobalContextMenuHandler()
})
watch(() => globalStore.isBigCharMode, (val) => {
  if (import.meta.client) {
    document.body.classList[val ? 'add' : 'remove']('big-char-mode')
  }
})

function addGlobalContextMenuHandler() {
  document.addEventListener('contextmenu', handleContextMenu)
}

function removeGlobalContextMenuHandler() {
  document.removeEventListener('contextmenu', handleContextMenu)
}

function handleContextMenu(event: any) {
  const target = event.target
  if (target?.tagName?.toLowerCase() === 'img' || isCanvasImage(target)) {
    event.preventDefault()
  }
}

function isCanvasImage(element: HTMLCanvasElement) {
  if (element?.tagName?.toLowerCase?.() === 'canvas') {
    const context = element.getContext('2d')
    if (context && context.getImageData(0, 0, 1, 1).data.length > 0) {
      // Canvas contains image data
      return true
    }
  }
  return false
}

</script>

<template>
  <VitePwaManifest/>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator color="var(--color-primary)"/>
      <el-config-provider :locale="zhCn">
        <NuxtPage
          :transition="{
            name: 'bounce',
            mode: 'out-in',
          }"
        />
      </el-config-provider>
    </div>
  </NuxtLayout>
</template>

<style>
@import '~~/app/assets/style/global.scss';
</style>
